<template>
	<view class="container">
		<view class="login-container">
			<view class="title">登录</view>
			<view class="form-item">
				<input type="text" placeholder="请输入用户名" v-model="username"/>
			</view>
			<view class="form-item">
				<input type="password" placeholder="请输入密码" v-model="password"/>
			</view>
			<button class="login-btn" @click="login">登录</button>
			<view class="register-link">
				<text>没有账号?</text>
				<navigator url="/pages/tabBar/register/register">去注册</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:'lh',
				password:'123',
				isPwdFocus:true
			};
		},
		methods: {
			login(){
				console.log("login()-->登录");
				if(!this.username || !this.password){
					uni.showToast({
						title:'请输入完整信息',
						icon:'none'
					})
					return
				}
				console.log("login()-->登录验证" + this.username);
				if(this.username && this.password){
					console.log("login()-->登录验证成功");
					const _this = this;
					uni.setStorage({
						key:'Account',
						data:this.username,
						success(){
							console.log("Account存储成功");
							getApp().globalData.isLogin = true;
							getApp().globalData.userName = _this.username;
						},fail(e){
							console.log("Account存储失败");
						},
						complete(){
							console.log("Account存储完成");
						}
					})
					uni.switchTab({
						url:"/pages/uesrPage/uesrPage"
					})
				}else{
					console.log("login()-->登录验证失败");
					uni.showToast({
						title:'密码错误，请重新输入',
					});
					this.password='';
					this.isPwdFocus=true;
				}
			}
		}
	};
</script>

<style scoped>
	.login-container {
		margin: 15px;
		padding: 15px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0,0,0.1);
	}
	.title{
		font-size: 24px;
		margin-bottom: 30px;
	}
	.form-item{
		margin-bottom: 20px;
		width: 100%;
	}
	input{
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 10px;
	}
	.login-btn{
		width: 100%;
		background-color: #007AFF;
		color: #fff;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 20px;
	}
	.register-link{
		display: flex;
		align-items: center;
	}
	.register-link text{
		margin-right: 5px;
		
	}
	.nav-hover{
		color: #007AFF;
	}
</style>